<div anchor-id="table-pager" class="ng-cloak table__pager" ng-show="show">
  <div class="table__pager-links">
    <span anchor-id="table-pager-prev" class="table__pager-link"
          ng-class="{'ring-link': selectedPageNum > 1, 'table__pager-link_disabled': selectedPageNum <= 1}"
          ng-click="selectedPageNum > 1 && loadPage(selectedPageNum-1)">&larr; {{previousPageText}}</span>
    <span anchor-id="table-pager-next" class="ring-link table__pager-link"
          ng-class="{'ring-link': selectedPageNum < totalPages, 'table__pager-link_disabled': selectedPageNum >= totalPages}"
          ng-click="selectedPageNum < totalPages && loadPage(selectedPageNum+1)">{{nextPageText}} &rarr;</span>
  </div>

  <div class="ring-button-toolbar">
    <div class="ring-button-group" ng-show="startPage > 1">
      <button anchor-id="table-pager-first" class="ring-button" ng-click="loadPage(1)">{{firstPageText}}</button>
    </div>

    <div class="ring-button-group">
      <button anchor-id="table-pager-back" class="ring-button" ng-if="startPage > 1" ng-click="loadPage(startPage-1)">...</button>
      <button anchor-id="table-pager-page" class="ring-button" ng-class="calculatePageClass(pageNum)" ng-repeat="pageNum in pages" ng-click="loadPage(pageNum)">{{pageNum}}</button>
      <button anchor-id="table-pager-more" class="ring-button" ng-if="endPage < totalPages" ng-click="loadPage(endPage+1)">...</button>
    </div>

    <div class="ring-button-group" ng-show="endPage < totalPages">
      <button anchor-id="table-pager-last" class="ring-button" ng-click="loadPage(totalPages)">{{lastPageText}}</button>
    </div>
  </div>

  <rg-select anchor-id="table-pager-pages-select" ng-if="topOptions" class="table__pager-select"
             options="num as getTopOptionLabel(num) num in topOptions"
             ng-model="top" on-select="topChange(selected.originalModel)"></rg-select>
</div>
